* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;

  .wrap {
    display: none;
    transform: perspective(1000);
  }

  .container {
    height: 100vh;
    width: 100vw;

    .bg {
      height: 100vh;
      width: 100vw;
      background-image: url(../img/bg.jpg);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      .dinglan {
        position: absolute;
        top: 0;
        width: 100vw;


        .lock {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .topMsg {
        color: #fff;
        position: absolute;
        top: 8%;

        .time {
          font-size: 120px;
        }

        .date {
          font-size: 30px;
        }

        .nongli {
          font-size: 28px;
        }
      }

      .msgBox {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        top: 393px;

        #one {
          animation-delay: 1s; // 动画延迟时间
          animation-duration: 0.5s; //动画持续时间
        }

        #two {
          animation-delay: 2s; // 动画延迟时间
          animation-duration: 0.5s; //动画持续时间
        }

        #three {
          animation-delay: 3s;
          animation-duration: 0.5s; //动画持续时间
        }
      }

      .tools {
        width: 100vw;
        position: absolute;
        bottom: 15%;

        .flashlight {
          position: absolute;
          left: 20%;
        }

        .camera {
          position: absolute;
          right: 20%;
        }
      }

      .msg {
        width: 95%;
        margin-bottom: 5vw;
      }

      .chat {
        height: 100vh;
        width: 100vw;
        z-index: 1;
        position: relative;

        .groupList {
          background-color: #fff;
          width: 100vw;
          height: 100vh;
          position: absolute;
          top: 0;
          left: 0;
          animation-delay: 4s;
          animation-duration: 0.4s; //动画持续时间
          width: 100%;
          height: 100%;

          .groupInput {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100vw;
          }
        }

        // 以下为第一个聊天
        .groupTop {
          animation-delay: 5s;
          animation-duration: 0.4s;
          z-index: 2;
          display: block;
        }

        .groupBo {
          animation-delay: 5s;
          animation-duration: 0.4s;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 1;
        }

        .classGroup {
          .classmates {
            animation-delay: 5s;
            animation-duration: 0.4s;
            color: #333;
            font-weight: bold;
            font-size: 28px;
            position: absolute;
            top: 2%;
            left: 50%;
            margin-left: -100px;
            z-index: 2;
          }

          .classBg {
            animation-delay: 5s;
            animation-duration: 0.4s;
            width: 100vw;
            height: 100vh;
            z-index: -1;
          }

          .classTalk01,
          .classTalk02,
          .classTalk03,
          .classTalk04 {
            animation-delay: 6s;
            animation-duration: 0.5s;
            position: absolute;
            top: 177px;
            left: 5%;
          }

          .classTalk02 {
            animation-delay: 7s;
            top: 345px;
          }

          .classTalk03 {
            animation-delay: 8s;
            top: 450px;
          }

          .classTalk04 {
            animation-delay: 9s;
            top: 550px;
          }
        }

        // .groupList02 {
        //   background-color: #fff;
        //   width: 100vw;
        //   height: 100vh;
        //   position: absolute;
        //   top: 0;
        //   left: 0px;
        //   animation-delay: 10s;
        //   animation-duration: 0.4s;
        //   width: 100%;
        //   height: 100%;
        //   box-shadow: 0 0 40px 15px #0008;
        //   z-index: 5;

        //   .groupInput02 {
        //     position: absolute;
        //     bottom: 0;
        //     left: 0;
        //     width: 100vw;
        //   }
        // }

        // 以下为第二个聊天
        .firmGroup02 {
          width: 100vw;
          height: 100vh;
          z-index: 5;
          position: absolute;
          top: 0;
          left: 0;

          .firmGroupTop,
          .firmGroupBo,
          .firmTitle,
          .firmBg {
            animation-duration: 0.4s;
            animation-delay: 10.5s;
            display: block;
          }

          .firmGroupBo {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 5;
          }

          .firmTitle {
            color: #333;
            font-weight: bold;
            font-size: 28px;
            position: absolute;
            top: 2%;
            left: 50%;
            margin-left: -100px;
          }

          .firmBg {
            height: 100vh;
            width: 100vw;
          }

          .firmTalk01,
          .firmTalk02,
          .firmTalk03,
          .firmTalk04 {
            animation-delay: 11.4s;
            animation-duration: 0.5s;
            position: absolute;
            top: 187px;
            left: 5%;
          }

          .firmTalk02 {
            animation-delay: 12.3s;
            top: 345px;
          }

          .firmTalk03 {
            animation-delay: 13.1s;
            top: 450px;
          }

          .firmTalk04 {
            animation-delay: 14s;
            top: 550px;
          }
        }

        // .groupList03 {
        //   background-color: #fff;
        //   width: 100vw;
        //   height: 100vh;
        //   position: absolute;
        //   top: 0;
        //   left: 0px;
        //   animation-delay: 15s;
        //   animation-duration: 0.4s;
        //   width: 100%;
        //   height: 100%;
        //   box-shadow: 0 0 40px 15px #0008;
        //   z-index: 5;

        //   .groupInput03 {
        //     position: absolute;
        //     bottom: 0;
        //     left: 0;
        //     width: 100vw;
        //   }
        // }

        // 以下为第三个聊天
        .homeGroup02 {
          width: 100vw;
          height: 100vh;
          z-index: 5;
          position: absolute;
          top: 0;
          left: 0;

          .homeGroupTop,
          .homeGroupBo,
          .homeTitle,
          .homeBg {
            display: block;
            animation-duration: 0.4s;
            animation-delay: 15.2s;
          }

          .homeGroupBo {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 5;
          }

          .homeTitle {
            color: #333;
            font-weight: bold;
            font-size: 28px;
            position: absolute;
            top: 2%;
            left: 50%;
            margin-left: -71px;
          }

          .homeBg {
            height: 100vh;
            width: 100vw;
          }

          .homeTalk01,
          .homeTalk02,
          .homeTalk03,
          .homeTalk04 {
            animation-delay: 15.7s;
            animation-duration: 0.5s;
            position: absolute;
            top: 177px;
            left: 5%;
          }

          .homeTalk02 {
            animation-delay: 16.6s;
            top: 345px;
          }

          .homeTalk03 {
            animation-delay: 17.4s;
            top: 450px;
          }

          .homeTalk04 {
            animation-delay: 18.3s;
            top: 550px;
          }
        }

        // .groupList04 {
        //   background-color: #fff;
        //   width: 100vw;
        //   height: 100vh;
        //   position: absolute;
        //   top: 0;
        //   left: 0px;
        //   animation-delay: 20.5s;
        //   animation-duration: 0.4s;
        //   width: 100%;
        //   height: 100%;
        //   box-shadow: 0 0 40px 15px #0008;
        //   z-index: 5;

        //   .groupInput04 {
        //     position: absolute;
        //     bottom: 0;
        //     left: 0;
        //     width: 100vw;
        //   }
        // }
      }

      .applet {
        animation-delay: 19.5s;
        animation-duration: 0.4s;
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        background-image: url(../img/appletBg.png);
        background-size: cover;
        z-index: 8;

        .appletItem {
          animation-delay: 19.5s;
          animation-duration: 0.4s;

          img {
            position: absolute;
            top: 304px;
            left: 10%;
            width: 250px;
          }

          .firstP,
          .secP {
            position: absolute;
            top: 420px;
            left: 0;
            width: 250px;
            color: #fff;
            font-size: 18px;
          }

          .secP {
            top: 445px;
          }
        }
      }

      .final {
        animation-delay: 20.2s;
        animation-duration: 0.7s;
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        background-image: url(../img/paperBg.png);
        background-size: cover;
        z-index: 9;

        img {
          width: 100vw;
        }

        .flower {
          z-index: 2;
          position: absolute;
          top: 22px;
          left: 0;
        }

        .paper {
          background-image: url(../img/paper.png);
          width: 540px;
          height: 810px;
          position: absolute;
          top: 200px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 1;
          display: flex;
          align-items: center;



          @keyframes rowup {
            0% {
              -webkit-transform: translate3d(0, 100px, 0);
              transform: translate3d(0, 100px, 0);
            }

            100% {
              -webkit-transform: translate3d(0, -350px, 0);
              transform: translate3d(0, -350px, 0);
            }
          }

          .textList {
            height: 350px;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .rowup {
              animation: 8s rowup linear normal;
              animation-delay: 21.2s;
              animation-fill-mode: forwards;
              position: relative;

              img {
                width: 100%;
              }
            }
          }
        }

        @keyframes mailup {
          0% {
            -webkit-transform: translate3d(0, 100vh, 0);
            transform: translate3d(0, 100vh, 0);
          }

          100% {
            -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
          }
        }

        .mailTop {
          // animation: 2s mailup linear normal;
          animation-delay: 29.2s;
          // animation-fill-mode: forwards;
          position: absolute;
          top: -40px;
          left: 50%;
          margin-left: -303px;
          /* transform: translateX(-50%); */
          width: 606px;
        }

        .mailBo {
          animation-delay: 29.2s;
          position: absolute;
          top: 170px;
          left: 50%;
          margin-left: -303px;
          z-index: 1;
          width: 606px;
        }

        .mailClose {
          display: none;
          // opacity: 0;
          z-index: 3;
          position: absolute;
          top: 170px;
          left: 50%;
          transform: translateX(-50%);
          animation-delay: 30.2s;
          animation-duration: 0.1s;

          img {
            width: 606px;
          }
        }

        .firstMeet {
          width: 332px;
          height: 82px;

          img {
            position: absolute;
            left: 50%;
            top: 1080px;
            margin-left: -166px;
            width: 332px;
            animation-duration: 0.4s;
          }
        }
      }

      .showIndex {
        animation-duration: 0.4s; //动画持续时间
      }

      .custom,
      .invite {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
      }

      .custom {
        display: none;
        flex-direction: column;

        .custom__rules {
          font-size: 30px;
          color: #fff;
          align-self: flex-end;
          margin-bottom: 20px;
        }

        .custom__title {
          margin-bottom: 30px;
          font-size: 55px;
          color: #d4bf92;
          font-weight: 700;
          letter-spacing: 8px;
        }

        .custom__box {
          margin-bottom: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .custom__container {
            position: relative;
            width: 580px;
            height: 880px;
            padding-top: 20px;
            margin: 0 25px;
            background: url(../img/changjngmoban.png) no-repeat;
            background-size: cover;

            .swiper-container {
              width: 565px;
              height: 710px;

              .swiper-slide {
                background-image: url(../img/bg.jpg);

                img {
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  width: 100%;
                }
              }
            }

            .custom__choose {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 160px;
              padding: 5px 10px 10px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;

              .custom__say,
              .custom__time {
                height: 65px;
                line-height: 65px;
                font-size: 30px;
                margin: 5px 0;
                display: flex;
              }

              .choose__txt {
                color: #4f432b;
                font-weight: 700;
              }

              .select {
                flex: 1;
                position: relative;
                padding: 8px 10px;
                background-color: #e6decb;
                border-radius: 8px;

                .select__value {
                  width: 100%;
                  text-align: center;
                  line-height: 49px;
                  font-size: 25px;
                  overflow: hidden;
                }

                .select__icon {
                  position: absolute;
                  top: 8px;
                  right: 8px;
                  width: 65px;
                  height: 49px;
                  background-color: #bca77b;
                  border-radius: 8px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }

                .select__say {
                  position: absolute;
                  bottom: 65px;
                  left: 0;
                  z-index: 1;
                  background-color: #e6decb;
                  border-radius: 8px 8px 0 0;
                  display: none;
                }

                .select__time {
                  position: absolute;
                  bottom: 65px;
                  left: 0;
                  z-index: 1;
                  background-color: #e6decb;
                  border-radius: 8px 8px 0 0;
                  display: none;
                }

                li {
                  font-size: 25px;
                  width: 440px;
                  box-sizing: border-box;
                  padding: 0 5px;
                  background-color: #e6decb;
                }
              }
            }
          }
        }

        .custom__next {
          display: flex;
          justify-content: center;
          align-items: center;
          animation-duration: 0.4s; //动画持续时间

          .custom__btn {
            position: relative;
            width: 260px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            letter-spacing: 8px;
            font-size: 30px;
            margin-right: 35px;
            color: #fff;
            border: 4px solid #fff;
            border-radius: 25px;
          }

          .custom__btn:after {
            content: '';
            position: absolute;
            top: 20px;
            right: -30px;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 5px;
          }
        }
      }

      .rules {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;

        .rules__title {
          position: relative;
          width: 600px;
          font-size: 80px;
          font-weight: 700;
          color: #d1bb80;
          letter-spacing: 10px;
          display: flex;

          .rules-close {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 90px;
            height: 90px;
            background-color: #d1bb80;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .rules__content {
          width: 600px;
          height: 950px;
          border: 8px solid #d1bb80;
          box-sizing: border-box;
          margin-top: -5px;
          margin-bottom: 15px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .rules__ownership {
          font-size: 22px;
          color: #fff;
          letter-spacing: 4px;
        }
      }

      .invite {
        box-sizing: border-box;
        display: none;

        .invite__alert {
          position: absolute;
       display:none;
          top: 0;
          left: 0;
          z-index: 99;
          width: 100vw;
          height: 100vh;

          .alart__img {
            position: absolute;
            top: 345px;
            left: 50%;
            width: 560px;
            height: 370px;
            border: 15px solid #d1bb80;
            background-color: blue;
            box-sizing: border-box;
            transform: translateX(-50%);

            img {
              width: 100%;
              height: 100%;
            }

            .alart__imgClose {
              position: absolute;
              top: -84px;
              right: -15px;
              width: 70px;
              height: 70px;
              background-color: #d1bb80;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }

        .invite__bg {
          position: relative;
          width: 100vw;
          height: 930px;
          margin-bottom: 5px;
          border-bottom: 20px solid #e1c275;

          img {
            position: absolute;
            left: 0;
            bottom: 0;
          }

          .invite__nickName {
            font-size: 22px;
            color: #fff;
            position: absolute;
            left: 415px;
            top: 260px;
            width: 140px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
          }

          .invite__avatar {
            position: absolute;
            top: 300px;
            right: 225px;
            width: 140px;
            height: 140px;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 70px;
            background-color: rgba(255, 255, 255, 0.6);
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .invite__txt {
            position: absolute;
            top: 1%;
            left: 50%;
            transform: translateX(-50%);

            .invite__time {
              width: 175px;
              height: 40px;
              margin: auto;
              padding: 5px;
              margin-bottom: 10px;
              line-height: 40px;
              font-size: 28px;
              color: #dbc8a4;
              border: 4px solid #dbc8a4;
              border-radius: 20px;
            }

            .invite__say {
              font-size: 32px;
              font-weight: 700;
              color: #dbc8a4;
              letter-spacing: 8px;
              display: flex;
              flex-direction: column;
            }
          }

          .invite__notice {
            position: absolute;
            top: 1%;
            right: 5%;
            width: 73px;
            height: 108px;
            background: url("../img/zjgg.png") no-repeat;
          }
        }

        .invite__bottom {
          width: 100vw;

          .yyhy {
            text-align: center;
            font-size: 24px;
            color: #fff;
            letter-spacing: 8px;
          }

          .invite__swiper {
            position: relative;
            box-sizing: border-box;
            padding: 0 10px;
            margin: 10px 0;

            .prev1 {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }

            .next1 {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }

            .swiper-container1 {
              width: 90%;
              height: 80px;
              margin: auto;
              overflow: hidden;
            }

            .avatarImg {
              width: 85px;
              height: 80px;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;

              img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
              }
            }
          }

          .invite__item {
            display: flex;
            /* flex-direction: column; */
            align-items: center;
            justify-content: space-around;

            .invite__btn,
            .invite__btn02 {
              width: 300px;
              height: 90px;
              background: url("../img/button1.png") no-repeat;
              animation-duration: 0.4s; //动画持续时间
            }

            .invite__btn02 {
              background-image: url(../img/button4.png);
            }


          }

          .invite__ownership {
            font-size: 20px;
            color: #fff;
            letter-spacing: 4px;
          }
        }
      }

      .mask_share {
        width: 100vw;
        height: 100vh;
        background: url("../img/share.png") no-repeat;
        background-size: 100% 100%;
        display: none;
        z-index: 1;
      }

      .notice {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.8);
        display: none;

        .notice__title {
          position: relative;
          width: 600px;
          font-size: 80px;
          font-weight: 700;
          color: #d1bb80;
          letter-spacing: 10px;
          display: flex;

          .notice-close {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 90px;
            height: 90px;
            background-color: #d1bb80;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .notice__content {
          width: 600px;
          height: 950px;
          border: 8px solid #d1bb80;
          box-sizing: border-box;
          margin-top: -5px;
          margin-bottom: 15px;
          padding: 10px;
          display: flex;
          flex-direction: column;

          .notice__tit {
            font-size: 55px;
            color: #d1bb80;
            letter-spacing: 8px;
          }

          .notice__hd {
            height: 40px;
            line-height: 40px;
            color: #d1bb80;
            font-size: 24px;
            margin: 20px 0;
            background-color: #1d3793;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }

          .notice__list {
            font-size: 22px;
            color: #d1bb80;
            height: 726px;
            overflow-y: scroll;
            -webkit-overflow-scrolling : touch;

            li {
              position: relative;
              height: 100px;
              line-height: 100px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 2px solid #d1bb80;
              margin-bottom: 5px;

              .giftTime {
                width: 130px;
              }

              .giftImg {
                position: absolute;
                left: 173px;
                top: 50%;
                width: 70px;
                height: 70px;
                transform: translateY(-50%);

                  img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }

              .giftNick {
                position: absolute;
                left: 278px;
                top: 50%;
                width: 134px;
                transform: translateY(-50%);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .giftList {
                position: absolute;
                left: 421px;
                top: 50%;
                width: 130px;
                height: 100px;
                line-height: 40px;
                transform: translateY(-50%);
                word-break: break-all;
              }
            }
          }
        }

        .notice__ownership {
          font-size: 22px;
          color: #fff;
          letter-spacing: 4px;
        }
      }
    }
  }
}